<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双辉旅程网登录账号</title>
		<link rel="stylesheet" type="text/css" href="/front/css/headfoot.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/login.css"/>
	</head>
	<body>
		<!--登录顶部开始-->
		<header>
			<div id="login-header">
				<div class="login-header-middle">
					<div class="login-header-left">
						<a href={php} echo url('/web/index','','','www') {/php} title="首页">
							<i></i>
							<span class="login-shsy">双辉旅程网</span>
						</a>
						<span class="wel-login">欢迎登录</span>
					</div>
				</div>
			</div>
		</header>
		<!--登录顶部结束-->
		<!--登录内容部分开始-->
		<div id="login-box">
			<div class="login-bg-img">
				<h3 style="position:absolute;top:22%;right:60%;color:#c90;font-size:24px;">驾给我吧，带你游遍全世界！</h3>
				<form action="/user/loginsuccess" method="post">
					<div class="login-form">
						<div class="login-account">
							<p class="account-p">账户登录</p>
						</div>
						<div class="form-group-input">
							<div class="input-title">账号<span id="phoneerror" ></span></div>
							<input type="text" name="phone" value="{$b.phone}" placeholder="请输入已注册的手机号码"/>
						</div>
						<div class="form-group-input">
							<div class="input-title">密码<span id="passworderror" ></span></div>
							<input  type="password" name="password" placeholder="请输入正确的密码"/>
						</div>
						<div class="form-group-input form-input-code">
							<div class="input-title">图片验证码<span id="codeerror"></span></div>
							<input type="text" name="imgCode" value="{$b.imgCode}"  placeholder="请输入图片验证码"/>
							<label><img id="captcha_img" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" title="点击更换" src="{:captcha_src()}" class="m"></label>
						</div>
						<div class="form-group-input">
							<button type="submit">登<i style="padding: 0px 10px;"></i>录</button>
						</div>
						<div class="partner-account">
							<div class="partner-prompt">
								<p class="forgetpwd-reg">
									<a href="/userforgotpwd/forgetpwd">忘记密码?</a>
									<em style="padding: 0px 5px;">|</em>
									<a href="/user/register">注册账号</a>
								</p>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--登录内容部分结束-->
	<script type="text/javascript" src="/jquery.js"></script>
	<script type="text/javascript">
    	$(function(){
    		//账号验证
    		$("input[name='phone']").blur(function(){
    			var phone = $('input[name="phone"]').val();
    			//不能为空
    			if(!$.trim(phone)) {
					$("input[name='phone']").css({border: "1px solid red"});
					$("#phoneerror").html("请输入账号即手机号");
					return false;
    			}
    			//手机号格式是否满足
    			if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
					$("input[name='phone']").css({border: "1px solid green"});
					$("#phoneerror").html("");
    			}else {
					$("input[name='phone']").css({border: "1px solid red"});
					$("#phoneerror").html("格式不正确");
					return false;
    			}
    		})
    		//密码验证
    		$("input[name='password']").blur(function(){
    			var password = $('input[name="password"]').val();
    			//不能为空
    			if(!$.trim(password)) {
					$("input[name='password']").css({border: "1px solid red"});
					$("#passworderror").html("请输入密码");
					return false;
    			}else{
    				$("input[name='password']").css({border: "1px solid green"});
					$("#passworderror").html("");
    			}
    		})
    		//验证码验证
    		$('input[name="imgCode"]').keyup(function(){
    			var imgCodele = $('input[name="imgCode"]').val().length;
    			if (imgCodele>3){
    				$.get('/user/checkcode?imgCode='+$("input[name='imgCode']").val(),function(data){
							$("input[name='imgCode']").css({border: "1px solid green"});
							$("#codeerror").html("");
							if (data===0){
								$("input[name='imgCode']").css({border: "1px solid red"});
								$("#codeerror").html("验证码错误");
							}
						});
    			}
 				})
 				$('input[name="imgCode"]').blur(function(){
    			var imgCodele = $('input[name="imgCode"]').val().length;
  				var imgCode = $('input[name="imgCode"]').val();
  				//不能为空
    			if(imgCodele==0) {
						$("input[name='imgCode']").css({border: "1px solid red"});
						$("#codeerror").html("请输入验证码");
						return false;
    			}
 				})
    	})
    </script>

		<!--公共底部开始-->
		{include file='./base/footer'}
		<!--公共底部结束-->
	</body>
</html>
